const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const miniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    entry: {
        // vendor: [
        //     './js/vis.js',
        // ],
        app: [
            './src/component.js',
            './api/index.js',
            './src/tool.js'
        ]
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name].js',
        publicPath: './'

    },
    module: {
        rules: [
            {
                test: '/\.js$/',
                use: 'babel-loader',
                exclude: '/node_modules'
            },
            {
                test: /\.css$/,
                use: [{ loader: miniCssExtractPlugin.loader }, 'css-loader'],
                // exclude: '/node_modules'
            },

            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,  //小于该值的图片会使用base64编码
                            // name: '[name].[hash:8].[ext]',  //打包后的图片名称 [ext]指图片格式,
                            outputPath: 'img/'
                            //outputPath: 'imgs/',  //通过该属性设置，打包输出的路径多一层
                            // publicPath: 'http://cdn.com'  //图片的访问路径为 http://cdn.com/img/big.561361.pn
                        }
                    }
                ],

            }
        ]

    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'app.html',
            hash: true,
            // inject:'head'
        }),
        new miniCssExtractPlugin({
            filename: '[name].css',
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    }
}